<!DOCTYPE html>
<html>
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <meta content="telephone=no" name="format-detection" />
    <meta content="address=no" name="format-detection" />
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <title>AlloyTouch</title>
</head>
<body>
 <div id="selectCtn"></div>
</body>

<script src="../../alloy_touch.js"></script>
<script src="../../transformjs/transform.js"></script>
<script src="alloy_touch.select.multiple.js"></script>
<script>

    var at = new AlloyTouch.MultipleSelect({
        options: [
            {name: 'a0', list: [
                {name: 'b0', list: [{name: 'c0'}, {name: 'c1'}]},
                {name: 'b1', list: [{name: 'c0'}, {name: 'c1'}, {name: 'c2'}]}
            ]},
            {name: 'a1', list: [
                {name: 'b0', list: [{name: 'c0'}]},
                {name: 'b1', list: [{name: 'c0'}, {name: 'c1'}, {name: 'c2'}, {name: 'c3'}, {name: 'c4'}]},
                {name: 'b2', list: [{name: 'c0'}, {name: 'c1'}]}
            ]},
            {name: 'a2', list: [
                {name: 'b0'}
            ]},
            {name: 'a3'}
        ],
        level: 3,
        renderTo: "#selectCtn",
        selectedIndex: [1, 2, 3],
        change: function (selectedIndex, text1, text2, text3) {
            console.log(text1 + '-' + text2 + '-' + text3);
        },
        complete: function (selectedIndex, text1, text2, text3) {
            alert(text1 + '-' + text2 + '-' + text3);
            at.hide();
        }

    })
</script>
</html>
